<!-- 示例: 不允许停靠 -->
<template>
  <div>
    <draggable :list="arr" group="test" animation="300" class="draggablePanel" :move="onMove">
      <transition-group>
        <div class="item" v-for="item in arr" :key="item.id">{{ item.name }}</div>
      </transition-group>
    </draggable>
  </div>
</template>

<script>
import {defineComponent, reactive} from "vue";
import {VueDraggableNext as draggable} from 'vue-draggable-next'

export default defineComponent({
  setup() {
    const arr = reactive([
      {id: 1, name: "张三(不允许停靠)"},
      {id: 2, name: "李四"},
      {id: 3, name: "王五"},
      {id: 4, name: "赵六"}
    ]);
    const onMove = (e, originalEvent) => {
      console.log(e.relatedContext)
      if (e.relatedContext && e.relatedContext.element && e.relatedContext.element.id == 1) {
        // 停靠元素为1, 则禁止移动
        return false;
      }
      return true;
    }
    return {arr, onMove}
  },
  components: {
    draggable
  }
})
</script>

<style scoped>
.draggablePanel div {
  width: 100%;
  height: 30px;
  line-height: 30px;
  margin-bottom: 5px;
  background-color: #eeeeee;
  padding-left: 20px;
  cursor: move;
}
</style>